<!--
/**
* Author: zyf
* Date: 2020-08-06 09:04
* Desc: CinemaNotice
*/
-->

<template>
  <view class="cinema-notice flex flex-m">
    <view @click="handleClick" class="flex-1 onShow">{{ value }}</view>

    <zm-popup
      round="50rpx"
      v-model="visible"
      position="bottom"
      :closeable="false"
    >
      <view class="cinema-notice__content">
        <view class="fs32 fb fc3 mb20">公告</view>
        <!--#ifdef MP-ALIPAY-->
        <rich-text class="mt10 wb fc8 content-box" :nodes="getRichText()" />
        <!--#endif-->
        <!--#ifndef MP-ALIPAY-->
        <view
          class="mt10 wb fc8 content-box"
          v-html="$utils.toHtml(value)"
        ></view>
        <!--#endif-->

        <view
          class="pt30 pb30 bc-lg flex br18 fc-white fs36 flex-c-m"
          @click="close"
          >我知道了</view
        >
      </view>
    </zm-popup>
  </view>
</template>

<script>
  import ZmPopup from '@/commons/ZmPopup'
  // #ifdef MP-ALIPAY
  import parseHtml from '@/utils/htmlParser'
  // #endif
  export default {
    name: 'CinemaNotice',
    props: {
      value: String
    },
    components: {
      ZmPopup
    },
    data() {
      return {
        visible: false
      }
    },
    methods: {
      handleClick() {
        this.visible = true
      },
      close() {
        this.visible = false
      },
      getRichText() {
        console.log('getRichText', this.value)
        return parseHtml(this.value)
      }
    }
  }
</script>
<style lang="scss" scoped>
  .cinema-notice {
    width: 100%;
    color: #ffb415;
    padding: 0 20rpx;
    box-sizing: border-box;
    height: 82rpx;
    background: rgba($color: #fffbe3, $alpha: 0.4);
    border-radius: 18rpx;
    &__content {
      padding: 40rpx 30rpx;
      // min-height: 400rpx;
      box-sizing: border-box;
      color: #888;
      .content-box {
        margin-bottom: 70rpx;
      }
      .bc-lg {
        background: linear-gradient(135deg, #55baff 0%, #23e6d8 100%);
      }
    }
  }
</style>
